<template>
  <div class="form-container">
    <a-card class="card">
      <a-form
        class="form"
        ref="formRef"
        :model="formState"
        name="basic"
        :label-col="{ span: 4 }"
        @finish="onFinish"
        :wrapper-col="{ span: 20 }"
        autocomplete="off"
      >
        <a-form-item
          label="活动名称"
          name="activityTitle"
          :rules="[{ required: true, message: '请输入活动名称' }]"
        >
          <a-input
            v-model:value="formState.activityTitle"
            placeholder="请输入活动名称"
          />
        </a-form-item>
        <a-form-item
          label="活动区域"
          name="activityArea"
          :rules="[{ required: true }]"
          @click.stop
        >
          <a-select
            v-model:value="formState.activityArea"
            style="width: 160px"
            :options="activityOptions"
          ></a-select>
        </a-form-item>
        <a-form-item
          label="配送时间"
          name="deliveryTime"
          :rules="[{ required: true, message: '请选择时间' }]"
        >
          <a-date-picker
            v-model:value="formState.deliveryTime"
            style="width: 160px"
            value-format="YYYY-MM-DD"
            placeholder="请选择时间"
          />
        </a-form-item>
        <a-form-item label="即时配送" name="isInstant">
          <a-switch v-model:checked="formState.isInstant" />
        </a-form-item>
        <a-form-item
          label="活动性质"
          name="activityCharacter"
          :rules="[{ required: true, message: '请选择活动性质' }]"
        >
          <a-checkbox-group
            v-model:value="formState.activityCharacter"
            name="activityCharacter"
            :options="activityChaOptions"
          />
        </a-form-item>
        <a-form-item
          label="特殊资源"
          name="resource"
          :rules="[{ required: true, message: '请选择活动资源' }]"
        >
          <a-checkbox-group
            v-model:value="formState.resource"
            name="resourceOptions"
            :options="resourceOptions"
          />
        </a-form-item>
        <a-form-item label="上传图片" name="pictureList">
          <a-upload
            v-model:file-list="formState.pictureList"
            action=""
            list-type="picture"
            :show-upload-list="false"
          >
            <div class="upload-box">
              <plus-outlined></plus-outlined>
              <div class="ant-upload-text">点击上传</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item
          label="备注"
          name="remark"
          :rules="[{ required: true, message: '请输入备注' }]"
        >
          <a-textarea
            v-model:value="formState.remark"
            placeholder="请输入备注"
            :auto-size="{ minRows: 1, maxRows: 5 }"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 4 }">
          <a-button
            type="primary"
            html-type="submit"
            :style="{ marginRight: '20px' }"
            >立即创建</a-button
          >
          <a-button @click="onReset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { IValidateForm, IOptions } from "@/type/Form";
import { FormInstance, message, UploadProps } from "ant-design-vue";
import { UploadOutlined, PlusOutlined } from "@ant-design/icons-vue";

const formState = ref<IValidateForm>({
  activityTitle: "",
  activityArea: "area1",
  deliveryTime: "",
  isInstant: false,
  activityCharacter: [],
  resource: [],
  pictureList: [],
  remark: "",
});
const formRef = ref<FormInstance>();

// 活动区域选项
const activityOptions: IOptions[] = [
  {
    label: "区域一",
    value: "area1",
  },
  {
    label: "区域二",
    value: "area2",
  },
];
// 活动性质选项
const activityChaOptions: IOptions[] = [
  {
    label: "美食/餐厅线上活动",
    value: "online",
  },
  {
    label: "地推活动",
    value: "ground",
  },
  {
    label: "线下主题活动",
    value: "offline",
  },
  {
    label: "单纯品牌曝光",
    value: "exposure",
  },
];
// 特殊资源选项
const resourceOptions: IOptions[] = [
  {
    label: "线上品牌商赞助",
    value: "online",
  },
  {
    label: "线下场地免费",
    value: "offline",
  },
];

const onFinish = (values: any) => {
  message.success({
    content: "提交成功",
  });
  onReset();
};
const onReset = () => {
  formRef.value?.resetFields();
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.form-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }

  .form {
    max-width: 800px;

    .upload-box {
      width: 160px;
      height: 160px;
      text-align: center;
      border: 1px dashed #d9d9d9;
      background-color: #fafafa;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .ant-upload-text {
        margin-top: 8px;
        color: #666;
      }
    }
  }
}
</style>
